<template>
  <div id="allMonitor">
    <!--  搜索  -->
    <div class="search">
      <el-button
        class="seletBtn top"
        size="small"
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="selectBridge"
        >桥梁选择</el-button
      >
      <el-tabs
        class="top"
        v-model="editableTabsValue"
        type="card"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          size="small"
          :key="item.id"
          v-for="(item, index) in editableTabs"
          :label="item.name"
          :name="item.id"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <CardContainer :headerName="getBridgeName(bridgeId).name + '监测总览'">
      <template slot="card-content">
        <TabSearch :dataList="dataList"></TabSearch>
      </template>
    </CardContainer>

    <div class="cardContainer" v-for="(item, key) in cardList" :key="key">
      <CardContainer :headerName="item.name">
        <!-- <template slot="header-right">
          <div class="header-right">
            损坏/总数: <span>1</span>&nbsp; &nbsp;告警数量: <span>26999</span>
          </div>
        </template> -->
        <template slot="card-content">
          <TableList :data="item.data"></TableList>
        </template>
      </CardContainer>
    </div>
    <SelectBridge ref="selectBridge" @getData="getData"></SelectBridge>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../components/CardContainer";
// 搜索tab容器
import TabSearch from "../components/TabSearch";
// 表格容器
import TableList from "../components/TableList";
import SelectBridge from "../components/SelectBridge";
import moment from "moment";

export default {
  data() {
    return {
      searchValue: "",
      dataList: [],
      editableTabsValue: "1",
      editableTabs: [],
      tabIndex: 1,
      bridgeId: "",
      birdgeListAll: [],
      cardList: [],
    };
  },
  components: {
    CardContainer,
    TabSearch,
    TableList,
    SelectBridge,
  },
  computed: {
    getBridgeName() {
      return (id) => {
        let data = this.birdgeListAll.filter((item) => item.id == id);
        return data[0];
      };
    },
  },
  mounted() {
    this.getBridgeAll();
  },
  methods: {
    handleTabClick(tab, event) {
      console.log(tab.name);
      this.activeTabName = tab.name;
    },
    removeTab(id) {
      console.log(id);
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === id) {
        tabs.forEach((tab, index) => {
          if (tab.id === id) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.id !== id);
      this.bridgeId = this.editableTabsValue;
    },
    // 获取所有桥梁
    getBridgeAll() {
      this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
        let ownInfo = JSON.parse(localStorage.getItem("ownInfo"))[0]; // 当前视图
        let birdgeListAll = res.data.data[0];
        this.birdgeListAll = birdgeListAll;
        // this.editableTabs = birdgeListAll;
          birdgeListAll.map((item, key) => {
          if (item.id == ownInfo.code) {
            this.editableTabs = [item];
            this.editableTabsValue = item.id;
            this.bridgeId = item.id;
          }
        });
      });
    },
    selectBridge() {
      // console.log(this.$refs.selectBridge);
      this.$refs.selectBridge.init();
    },
    getData(val) {
      console.log("选择桥梁的数据", val);
      this.editableTabs = val;
      this.editableTabsValue = val[0].id;
      this.bridgeId = this.editableTabsValue;
    },
    // 获取大桥总览列表
    getBridgeData() {
      this.$api.mearsuringPointSetting
        .getBridgeData({
          bridgeId: this.bridgeId,
        })
        .then((res) => {
          console.log("总览列表", res);
          console.log(this.editableTabs);
          this.dataList = res.data.data;
          if (this.dataList.length > 0) {
            this.dataList.map((item, key) => {
              this.getCard(item.name, item.id);
            });
          }
        });
    },

    // 时间戳转换

    parseTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D + h + m + s;
      console.log(strDate);
      return strDate;
    },

    // 获取card列表
    getCard(name, typeId) {
      var timestamp = new Date().getTime();
      let beginTime = timestamp - 86400000; // // 前一天前10分钟
      let endTime = timestamp - 85800000; //  前一天
      this.$api.mearsuringPointSetting
        .getCard({
          measurePointFirstTypeId: typeId,
          bridgeId: this.bridgeId,
          beginTime: this.parseTime(beginTime),
          endTime: this.parseTime(endTime),
        })
        .then((res) => {
          console.log("card", res.data.data);
          this.cardList.push({
            name: name,
            data: res.data.data,
          });
          console.log("组合好的数据", this.cardList);
        });
    },
  },
  watch: {
    editableTabsValue: {
      handler(newVal) {
        this.bridgeId = newVal;
      },
    },
    bridgeId: {
      handler(newVal) {
        this.bridgeId = newVal;
        this.getBridgeData();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: start;
  background: #fff;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 3px;
  .search_btn {
    margin-left: 30px;
  }
}
.serachHeader {
  width: 100%;
  min-height: 400px;
  height: auto;
}
.cardContainer {
  padding-top: 20px;
}
.header-right {
  span {
    color: #d62e2e;
    font-size: 24px;
    font-weight: bold;
  }
}

.search {
  display: flex;
  justify-content: start;
  background: #fff;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 3px;
  .seletBtn {
    margin-right: 20px;
    height: 40px;
  }
  .top {
    position: relative;
    top: 6px;
  }
}

/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e4e7ed !important;
}
/deep/.is-active.el-tabs__item.is-top.is-active.is-closable {
  background: #327bdc !important;
  color: #fff !important;
}

.mapContain {
  width: 100%;
}

.map {
  width: 100%;
  margin: 20px 0;
  min-height: 550px;
}
.topContainer {
  // background: chartreuse;
}
.realMonitor-tabContent {
  background: #fff !important;
}
.baseLine {
  background: #fff !important;
  height: 420px;
}
.tabs {
  span {
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    margin-right: 40px;
    cursor: pointer;
  }
}
.activeTab {
  border-bottom: 2px solid #327bdc;
}
</style>
